
import React, { Component, createRef } from "react";
import type { ReactNode } from 'react'


interface iState {
}
interface iProps { }


class Header extends Component {
    state = {
        count: 100
    }
    render(): ReactNode {
        return <>
            <header>头部组件 - {this.state.count}</header>
        </>
    }
}

function Content() {
    return <>
        <main> 你替老板吃苦，老板替我享福。 </main>
    </>
}

export default class App extends Component {

    state: iState = {}

    // 将 ref 设置到 html 标签中的时候，ref 可以代表当前标签
    h1Ref = createRef<HTMLHeadingElement>()

    // 将 ref 设置到 类组件中 的时候，ref 可以获取到当前组件
    headerRef = createRef<Header>()

    // 函数组件不能直接设置 ref 属性
    conRef = createRef()

    render() {
        return <>
            <div>
                <Header ref={this.headerRef}></Header>


                <h1 ref={this.h1Ref}>父组件</h1>

                {/* 函数组件不能直接设置 ref */}
                {/* <Content ref={this.conRef}></Content> */}


                <button onClick={() => {
                    // console.log(this.h1Ref.current?.innerText);

                    // 找到子组件
                    console.log(this.headerRef.current);
                    this.headerRef.current?.setState({ count: 666 })

                }}>点击获取</button>
            </div>
        </>
    }

}